<template>
  <el-dialog :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'" :close-on-click-modal="false" :visible.sync="visible" class="cu-dialog cu-dialog_center" lock-scroll width="900px">
    <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :disabled="!!isDetail" :rules="rules" v-loading="loading">
      <el-row :gutter="5" type="flex" style="flex-wrap:wrap">
        <el-col :span="12">
          <el-form-item label="校区" prop="campusId">
            <el-select v-model="dataForm.campusId" placeholder="请选择" clearable required filterable :style="{ width: '100%' }" @change="handleChangeCampus">
              <el-option v-for="(item, index) in campusOptions" :key="index" :label="item.fullName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日期" prop="operateDate">
            <el-date-picker v-model="dataForm.operateDate" placeholder="请选择" clearable required type="date" format="yyyy-MM-dd" value-format="timestamp" :style="{ width: '100%' }"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="原因" prop="reason">
            <el-input v-model="dataForm.reason" placeholder="请输入" show-word-limit :style="{ width: '100%' }" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否发送邮件" prop="isEmail">
            <el-checkbox v-model="dataForm.isEmail"></el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="收件人" prop="emailTo">
            <org-select ref="user-org" buttonType="button" v-model="dataForm.emailTo" title="添加用户" class="mb-10" @change="onOrgChange" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="抄送人" prop="emailCC">
            <email-input v-model="dataForm.emailCC"></email-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail" :loading="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from '@/utils/request'
import { getCampusSelector } from '@/api/campus/campus'
import OrgSelect from '@/components/Process/OrgSelect'
import EmailInput from '@/components/CustomEmailInput'
export default {
  components: { OrgSelect, EmailInput },
  props: [],
  data() {
    return {
      loading: false,
      visible: false,
      isDetail: false,
      dataForm: {
        id: '',
        campusId: undefined,
        reason: undefined,
        operateDate: +new Date(),
        isEmail: false,
        emailTo: [],
        emailCC: [],
        status: undefined
      },
      rules: {
        campusId: [
          {
            required: true,
            message: '请输入校区',
            trigger: 'change'
          }
        ],
        emailTo: [
          {
            required: true,
            message: '请选择邮件的收件人',
            trigger: 'change'
          }
        ]
      },
      campusOptions: [],
      isPayedOptions: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async getCampusSelector() {
      await getCampusSelector().then(res => {
        this.campusOptions = this.isDetail ? res.data : res.data.filter(o => o.status != 'colse' && o.type != 'direct')
      })
    },
    handleChangeCampus(campusId) {
      let campus = this.campusOptions.find(o => o.id === campusId)
      let emailTo = ['433118678402204933', '433117269455799557', '416750280923677957', '416750736257320197', '381956723331564805', '423653212629763333', '416750360632231173', '396078644641924357', '416750479951791365', '416752342017246469', '433119597265159429', '370757840840688901', '416750440911209733', '519711074023376133', '433108138439214341']
      if (campus.company == '河北分公司') {
        emailTo.push('416749733969659141')
        emailTo.push('492107727120631045')
      } else if (campus.company == '山东分公司') {
        emailTo.push('720164055167272197')
        emailTo.push('416748329951560965')
      } else if (campus.company == '西安分公司') {
        emailTo.push('720164338505090309')
        emailTo.push('416748748413076741')
      }
      this.onOrgChange(emailTo)
    },
    onOrgChange(data) {
      this.dataForm.emailTo = data
    },
    async init(campusId, status) {
      await this.getCampusSelector()
      this.loading = true
      this.visible = true
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields()
        this.dataForm.campusId = campusId || ''
        this.dataForm.status = status
        this.handleChangeCampus(campusId)
        this.loading = false
      })
    },

    dataFormSubmit() {
      // 防连点
      this.searchTimer && clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(() => {
        this.$refs['elForm'].validate(valid => {
          if (valid) {
            this.loading = true
            if (!this.dataForm.id) {
              request({
                url: `/api/campus/contract/status`,
                method: 'put',
                data: this.dataForm
              }).then(res => {
                this.loading = false
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () => {
                    this.visible = false
                    this.loading = false
                    this.$emit('refresh', true)
                  }
                })
              })
            }
          }
        })
      }, 300)
    }
  }
}
</script>
